<template>
	<view class="item" @click="leadClick(item)">
		<u-image width="92rpx" height="92rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_photo_teacher.png"></u-image>
		<view class="info">
			<text class="name">{{item.childName}}</text>
			<view>
				<text class="parent">{{item.name}}</text>
				<text class="phone">{{item.mobile}}</text>
			</view>
			
		</view>
		<view class="desc">
			<text class="state">{{getStateString(item)}}</text>
			<view class="more">详情</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyLeads,
	} from '@/api/clientele.js'
	import LeadAddView from '@/pages_operate/clientele/components/lead-add-view.vue'
	import Fab from '@/components/fab.vue'
	export default {
		name: 'ClienteleItem',
		components: {
			LeadAddView,
			Fab
		},
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
			}
		},
		methods: {
			leadClick(item) {
				this.$emit('click', item);
			},
			getStateString(item) {
				let state = '';
				switch (item.status) {
					case 1:
						state = '未处理';
						break;
					case 2:
						state = '初访';
						break;
					case 3:
						state = '已邀约';
						break;
					case 4:
						state = '已到访';
						break;
					case 5:
						state = '不感兴趣';
						break;
					case 6:
						state = '未接通';
						break;
					case 7:
						state = '地域不符';
						break;
					case 8:
						state = '孩子超龄';
						break;
					case 9:
						state = '无效的联系方式';
						break;
					default:
						state = '未知';
				}
				return state;
			}
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 120rpx;
		border-bottom: 0.5rpx solid $app-divider-color;
	
		.info {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
	
			.name {
				font-size: 30rpx;
			}
			
			.parent{
				font-size: 24rpx;
				margin-top: 10rpx;
			}
	
			.phone {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	
		.desc {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			font-size: 28rpx;
	
			.state {
				text-align: center;
			}
	
			.more {
				margin-top: 10rpx;
				color: #FFFFFF;
				background-color: $app-check-color;
				height: 56rpx;
				width: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 26rpx;
			}
		}
	}
</style>
